<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<kui-space :gap="[30,0]" direction="column">
				<kui-cell-group title="基本用法">
					<kui-grid :columns="4">
						<template v-for="i in 8" :key="i">
							<kui-grid-item icon="slideshare" text="文本"></kui-grid-item>
						</template>
					</kui-grid>
				</kui-cell-group>
				<kui-cell-group title="自定义列数">
					<kui-grid :columns="3">
						<template v-for="i in 3" :key="i">
							<kui-grid-item icon="slideshare" text="文本"></kui-grid-item>
						</template>
					</kui-grid>
				</kui-cell-group>
				<kui-cell-group title="列间距">
					<kui-grid :columns="4" :gutter="30">
						<template v-for="i in 4" :key="i">
							<kui-grid-item icon="slideshare" text="文本"></kui-grid-item>
						</template>
					</kui-grid>
				</kui-cell-group>
				<kui-cell-group title="内容反向">
					<kui-grid :columns="4" reverse>
						<template v-for="i in 4" :key="i">
							<kui-grid-item icon="slideshare" text="文本"></kui-grid-item>
						</template>
					</kui-grid>
				</kui-cell-group>
				<kui-cell-group title="内容横向">
					<kui-grid :columns="4" direction="horizontal">
						<template v-for="i in 4" :key="i">
							<kui-grid-item icon="slideshare" text="文本"></kui-grid-item>
						</template>
					</kui-grid>
				</kui-cell-group>
				<kui-cell-group title="图标颜色大小">
					<kui-grid :columns="3" iconColor="#00BC79">
						<template v-for="i in 3" :key="i">
							<kui-grid-item icon="slideshare" :iconColor="i == 2 ? '#3491FA' : ''" :iconSize="i == 2 ? 70 : 56" text="文本"></kui-grid-item>
						</template>
					</kui-grid>
				</kui-cell-group>
				<kui-cell-group title="自定义内容">
					<kui-grid :columns="3" iconColor="#00BC79">
						<template v-for="i in 3" :key="i">
							<kui-grid-item>
								<kui-icons type="heart" color="#F53F3F" :size="70"></kui-icons>
							</kui-grid-item>
						</template>
					</kui-grid>
				</kui-cell-group>
			</kui-space>
		</template>
	</kui-page>
</template>

<script lang="ts">
	import {
		reactive,
		CSSProperties,
		toRefs,
		computed,
		getCurrentInstance,
		onMounted,
		ref
	} from 'vue';
	
	export default {
		setup() {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			console.log(theme.colors);
			
			const rootStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				style.display = 'flex';
				// style.border = `1rpx solid red`;
				return style;
			});
			
			const contentStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				// style.display = 'flex';
				style.flexDirection = 'column';
				style.flexBasis = `${100 / 4}%`;
				style.boxSizing = 'border-box';
				style.paddingTop = `${100 / 4}%`;
				style.height = '100%';
				// style.padding = '32rpx 16rpx';
				style.backgroundColor = '#FFFFFF';
				const borderColor = theme.colors['light']['grey'][2];
				const borderWidth = '1rpx';
				const borderStyle = 'solid';
				style.borderRight = style.borderBottom = `${borderWidth} ${borderStyle} ${borderColor}`;
				
				// query.select('#content').boundingClientRect(data => {
				// 	console.log(data);
				// }).exec();
				return style;
			});
			
			return {
				rootStyle,
				contentStyle
			}
		}
	}
</script>

<style>

</style>
